<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="keywords" content="Acer" />
	<meta name="description" content="Acer" />
    <title>服务支持</title>
    <link rel="icon" type="image/x-icon" href="images/acer.ico">

    <!-- public -->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">

	<!-- private -->
 	<link rel="stylesheet" href="css/idangerous.swiper.css">
 	<link rel="stylesheet" href="css/idangerous.swiper.scrollbar.css">
    <script src="js/idangerous.swiper.min.js"></script>
   <!--  <script src="js/idangerous.swiper.scrollbar.js"></script> -->

</head>
<body>
	<div style='display:block;'>

<div class="swiper-container" id="swiper-container1" style="height:300px;">
	<div class="swiper-wrapper">
		<div class="swiper-slide blue-slide">
			slider1</div>
		<div class="swiper-slide red-slide">
			slider2</div>
		<div class="swiper-slide orange-slide">
			slider3</div>
	</div>
</div>
<div id="swiper-scrollbar1">
	&nbsp;</div>
<div class="contrast-value">
	true</div>
<br />
<br />
<div class="swiper-container" id="swiper-container2" style="height:300px;">
	<div class="swiper-wrapper">
		<div class="swiper-slide blue-slide">
			slider1</div>
		<div class="swiper-slide red-slide">
			slider2</div>
		<div class="swiper-slide orange-slide">
			slider3</div>
	</div>
</div>
<div id="swiper-scrollbar2">
	&nbsp;</div>
<div class="contrast-value">
	false</div>
<style type="text/css">
.swiper-container{
width:800px;
}
.swiper-scrollbar {
   height:10px;
   margin:20px auto;
   width: 800px;
display:block;
}</style>

<script type="text/javascript" src='http://2.swiper.com.cn/demo/scrollbar/js/idangerous.swiper.scrollbar.min.js'></script>
<link href="css/idangerous.swiper.scrollbar.css" rel="stylesheet" />

<script type="text/javascript">
$('#swiper-scrollbar1').html('<div class=swiper-scrollbar></div>');
$('#swiper-scrollbar2').html('<div class=swiper-scrollbar></div>');
var mySwiper1 = new Swiper('#swiper-container1',{
scrollbar: {
container : '#swiper-scrollbar1 .swiper-scrollbar',
hide : false,
    }
  }); 
var mySwiper2 = new Swiper('#swiper-container2',{
scrollbar: {
container : '#swiper-scrollbar2 .swiper-scrollbar',
draggable : false,
hide : false,
    }
  }); 
</script>


</body>
</html>